<template>
	<view class="content">
			<!-- 顶部收入统计区域 -->
			<view class="header">
				<view class="total-income">
					<text class="title">{{ $t('data.str1') }}</text>
					<text class="amount">{{total}}</text>
				</view>
				<view class="stats-row">
					<view class="stat-item">
						<text class="stat-value">{{cash}}</text>
						<text class="stat-title">{{ $t('data.str8') }}</text>
					</view>
					<view class="stat-item">
						<text class="stat-value">{{wechat}}</text>
						<text class="stat-title">{{ $t('data.str9') }}</text>
					</view>
					<view class="stat-item">
						<text class="stat-value">{{wechat}}</text>
						<text class="stat-title">{{ $t('data.str10') }}</text>
					</view>
				</view>
			</view>
			<view class="tab">
				<uv-tabs :list="tabList" @click="tabClick" scrollable="false"  lineColor="#FF3E3E"
					itemStyle="height: 44px; width:fit-content;padding-left:20px;padding-right:20px;" lineWidth="45px"></uv-tabs>
			</view>
			<scroll-view 
			class="scroll-Y" 
			scroll-y="true" 
			refresher-enabled="true" 
			:refresher-triggered="refreshing"
				@refresherrefresh="onRefresh"
				 @scrolltolower="loadMore">
				<view class="list" v-for="(item, index) in listData" :key="index">
					<view class="item">
						<view class="item-titel">{{item.title}}</view>
						<view class="cotnent">
							<view class="content-row">
								<view class="content-title">{{$t('data.str101')}}</view>
								<view class="content-value">{{item.playNum}}</view>
							</view>
							<view class="content-row">
								<view class="content-title">{{$t('data.str102')}}</view>
								<view class="content-value">{{item.depleteStoredNum}}</view>
							</view>
						</view>
						<view class="cotnent">
							<view class="content-row">
								<view class="content-title">{{$t('data.str103')}}</view>
								<view class="content-value">{{item.depleteTicketNum}}</view>
							</view>
							<view class="content-row">
								<view class="content-title">{{$t('data.str104')}}</view>
								<view class="content-value">{{item.onLinePayTotal}}</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 加载更多提示 -->
				<view class="loading-more">
					<text v-if="loading">加载中...</text>
					<text v-else-if="noMore">没有更多数据了</text>
					<text v-else>上拉加载更多</text>
				</view>
			</scroll-view>
	</view>
</template>

<script>
	export default {
		name: "data-revenue",
		data() {
			return {
				total:150.00,
				cash:0.00,
				wechat:0.00,
				ali:0.00,
				cashRegister:0.00,
				posMachine:0.00,
				coninMachine:0.00,
				wechatProgram:0.00,
				totalOrder:0,
				sellOrder:0,
				returnOrder:0,
				returnTotal:0.00,
				currentTab: 0, //tab 初始化索引
				listData: [
					{
						title:"闸机1",
						playNum:50,
						depleteStoredNum:150,
						depleteTicketNum:150,
						onLinePayTotal:150
					},
					{
						title:"闸机2",
						playNum:50,
						depleteStoredNum:150,
						depleteTicketNum:150,
						onLinePayTotal:150
					}
				], // 列表数据
				pageNum: 1, // 当前页码
				pageSize: 10, // 每页条数
				refreshing: false, // 是否正在下拉刷新
				loading: false, // 是否正在加载
				noMore: false, // 是否没有更多数据
				loadDataType: 1, //加载数据类型 1闸机 2卡头 3支付盒子 4数字彩票机
			};
		},
		computed:{
			tabList(){
				return [{
						name: this.$t('comm.str14')
					},
					{
						name: this.$t('comm.str15')
					},
					{
						name: this.$t('comm.str17')
					},
					{
						name: this.$t('comm.str16')
					}
				]
			}
		},
		methods: {
			tabClick(item) {
				this.currentTab = item.index
				console.log('item', item.name, item.index)
				//加载数据
			},
			// 加载数据
			async loadData() {
				if (this.loading) return;

				this.loading = true;

				try {
					// 这里替换为你的实际API接口
					const res = await uni.request({
						url: 'https://your-api-url.com/list',
						method: 'GET',
						data: {
							pageNum: this.pageNum,
							pageSize: this.pageSize
						}
					});

					const data = res[1].data; // uni.request返回的是数组，data在第二个元素

					if (this.pageNum === 1) {
						this.listData = data.list || [];
					} else {
						this.listData = [...this.listData, ...(data.list || [])];
					}

					// 判断是否还有更多数据
					this.noMore = data.list.length < this.pageSize;

				} catch (error) {
					console.error('请求失败:', error);
					uni.showToast({
						title: '加载失败',
						icon: 'none'
					});
				} finally {
					this.loading = false;
					this.refreshing = false;
				}
			},

			// 下拉刷新
			onRefresh() {
				if (this.refreshing) return;
				this.refreshing = true;
				this.pageNum = 1;
				this.noMore = false;
				this.loadData();
			},

			// 上拉加载更多
			loadMore() {
				if (this.loading || this.noMore) return;
				this.pageNum++;
				this.loadData();
			}
		}
	}
</script>

<style lang="scss">
	.content {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: start;
		align-items: center;
		padding: 15rpx;
	}

	/* 顶部区域样式 */
	.header {
		background-image: linear-gradient(120deg, #FF2916 0%, #FF542E 100%);
		width: 100%;
		height: fit-content;
		border-radius: 15rpx;
		padding-top: 30rpx;
		padding-bottom: 30rpx;
	}

	.total-income {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.title {
		font-size: 28rpx;
		color: #fff;
	}

	.amount {
		font-size: 48rpx;
		font-weight: bold;
		color: #fff;
		margin-top: 10rpx;
	}

	.stats-row {
		display: flex;
		justify-content: space-around;
		padding-left: 30rpx;
		padding-right: 30rpx;
	}

	.stat-item {
		display: flex;
		flex: 1;
		flex-direction: column;
		align-items: center;
	}

	.stat-title {
		font-size: 24rpx;
		color: #fff;
	}

	.stat-value {
		font-size: 32rpx;
		color: #fff;
		font-weight: bold;
		margin-top: 5rpx;
	}
	
	.tab {
		width: 100%;
		display: flex;
		margin-top: 15rpx;
		align-items: center;
		justify-content: center;
		background-color: white;
	}
	
	.scroll-Y {
		width: 100%;
		flex: 1;
		margin-top: 15rpx;
	}
	
	.loading-more {
		padding: 20rpx;
		text-align: center;
		color: #999;
		font-size: 26rpx;
	}
	
	.list {
		display: flex;
		height: fit-content;
	
	}
	
	.item {
		height: fit-content;
		flex-direction: column;
		background-color: white;
		margin-bottom: 2rpx;
		padding: 20rpx 15rpx 20rpx 15rpx;
		width: 100%;
	}
	
	.item-titel {
		color: black;
		font-size: 30rpx;
	}
	
	.cotnent {
		display: flex;
	}
	
	.content-row {
		display: flex;
		flex-direction: row;
		margin-top: 15rpx;
		flex: 1;
	}
	
	.content-title {
		color: gray;
	}
	
	.content-value {}
</style>